<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
       :root {
            --roof-color: #a52a2a;
            --wall-color: #8B4513;
            --gold: #ffd700;
        }

        body {
            background: linear-gradient(to bottom, #000814 60%, #1a237e);
            margin: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            position: relative;
        }

        /* 星空效果 */
        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 1.5s infinite;
        }
        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        /* 祠堂建筑细节 */
        .temple {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 220px;
            height: 320px;
        }
        .temple::before {
            /* 屋顶 */
            content: '';
            position: absolute;
            width: 120%;
            height: 80px;
            background: var(--roof-color);
            top: -40px;
            left: -10%;
            clip-path: polygon(0 100%, 50% 0, 100% 100%);
        }
        .temple::after {
            /* 主体建筑 */
            content: '唐氏祠堂';
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--wall-color);
            border: 3px solid var(--gold);
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(255,215,0,0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--gold);
            font-size: 28px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

      


        /* 新增图片素材基础样式 */
        .character-img {
            width: 60px;
            height: auto;
            position: absolute;
            pointer-events: none;
        }
      /* 无人机容器样式 */
      .drone-container {
            position: absolute;
            width: 300px;
            overflow: hidden;
        }

        /* 无人机图片样式 */
        .drone-img {
            width: 80px;
            filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
        }

        /* 横幅样式 */
        .banner {
            position: relative;
            background: rgba(255,255,255,0.9);
            padding: 6px 30px;
            border-radius: 4px;
            font-size: 16px;
            color: #c00;
            font-weight: bold;
            white-space: nowrap;
            margin-top: -5px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }


        @keyframes bannerWave {
            0%, 100% { transform: rotate(-2deg); }
            50% { transform: rotate(2deg); }
        }

        @keyframes moveLeftToRight {
            from { left: -100%; }
            to { left: 100%; }
        }

        @keyframes moveRightToLeft {
            from { right: -100%; }
            to { right: 100%; }
        }
        /* 人物动画 */
        .person-img {
            width: 150px;
            animation: jump 1s ease-in-out infinite;
        }

        @keyframes droneFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        @keyframes jump {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px) rotate(-5deg); }
        }


        /* 新型烟花容器 */
        .firework-v2 {
            position: absolute;
            width: 10px;
            height: 10px;
            pointer-events: none;
        }

        /* 核心光球 */
        .fire-core {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, 
                rgba(255,230,0,0.8) 0%,
                rgba(255,80,0,0.6) 70%,
                transparent 100%
            );
            animation: corePulse 0.8s ease-out forwards;
        }

        /* 扩散波纹 */
        .ripple {
            position: absolute;
            border: 2px solid rgba(255,180,0,0.4);
            border-radius: 50%;
            animation: rippleExpand 1.2s ease-out forwards;
        }

        /* 粒子轨迹 */
        .spark {
            position: absolute;
            width: 3px;
            height: 3px;
            background: linear-gradient(45deg, #ff0, #f90);
            border-radius: 50%;
            animation: sparkTrail 1s ease-out forwards;
        }

        /* 动画定义 */
        @keyframes corePulse {
            0% { transform: scale(0); opacity: 1; }
            50% { transform: scale(4); opacity: 0.8; }
            100% { transform: scale(6); opacity: 0; }
        }

        @keyframes rippleExpand {
            0% { transform: scale(0); opacity: 1; }
            100% { transform: scale(12); opacity: 0; }
        }

        @keyframes sparkTrail {
            0% {
                transform: translate(0,0);
                opacity: 1;
                box-shadow: 0 0 10px #ff0;
            }
            100% {
                transform: 
                    translate(
                        calc(var(--dir-x) * 200px), 
                        calc(var(--dir-y) * 200px)
                    );
                opacity: 0;
                box-shadow: 0 0 30px transparent;
            }
        }


    </style>
</head>
<body>
    <!-- 祠堂 -->
    <div class="temple"></div>

<!-- 无人机1：从左到右 -->
<div class="drone-container" style="
top: 15%;
left: -100%; /* 初始位置在屏幕左侧外 */
animation: moveLeftToRight 12s linear infinite;
">
<img src="drone.png" class="drone-img">
<div class="banner">恭贺唐家村新岁</div>
</div>

<!-- 无人机2：从右到左 -->
<div class="drone-container" style="
top: 30%;
right: -100%; /* 初始位置在屏幕右侧外 */
animation: moveRightToLeft 14s linear infinite;
">
<img src="drone2.png" class="drone-img">
<div class="banner">唐家村庄，瑞气盈门</div>
</div>

<!-- 无人机3：从左到右 -->
<div class="drone-container" style="
top: 45%;
left: -100%; /* 初始位置在屏幕左侧外 */
animation: moveLeftToRight 10s linear infinite;
">
<img src="drone.png" class="drone-img">
<div class="banner">唐润辉制作</div>
</div>


<!-- 无人机3：从右到左 -->
<div class="drone-container" style="
top: 60%;
right: -100%; /* 初始位置在屏幕右侧外 */
animation: moveRightToLeft 14s linear infinite;
">
<img src="drone2.png" class="drone-img">
<div class="banner">2025家族兴旺</div>
</div>



    <!-- 欢呼人物（替换为图片） -->
    <img src="person1.png" 
         class="character-img person-img"
         style="bottom:10%; left:5%">
         
    <img src="person2.png" 
         class="character-img person-img"
         style="bottom:15%; left:15%; animation-delay:0.3s">
         
    <img src="person3.png" 
         class="character-img person-img"
         style="bottom:8%; right:10%">
         
    <img src="person4.png" 
         class="character-img person-img"
         style="bottom:12%; right:20%; animation-delay:0.5s">


         <img src="person1.png" 
         class="character-img person-img"
         style="bottom:10%; right:28%">
         
         

         <script>
            // 自动生成星空
            for(let i=0; i<50; i++){
                const star = document.createElement('div');
                star.className = 'star';
                star.style.top = Math.random()*100 + '%';
                star.style.left = Math.random()*100 + '%';
                star.style.width = Math.random()*10 + 'px';
                star.style.height = star.style.width;
                star.style.animationDelay = Math.random()*2 + 's';
                document.body.appendChild(star);
            }

    


        // 新型烟花发射器
        function createNewFirework(x, y) {
            const container = document.createElement('div');
            container.className = 'firework-v2';
            container.style.left = x + 'px';
            container.style.top = y + 'px';
            document.body.appendChild(container);

            // 添加核心光球
            const core = document.createElement('div');
            core.className = 'fire-core';
            container.appendChild(core);

            // 添加扩散波纹
            for(let i=0; i<3; i++) {
                const ripple = document.createElement('div');
                ripple.className = 'ripple';
                ripple.style.animationDelay = i*0.2 + 's';
                container.appendChild(ripple);
            }

            // 添加随机粒子
            const particles = 24;
            for(let i=0; i<particles; i++) {
                const angle = (Math.PI*2 * i)/particles;
                const spark = document.createElement('div');
                spark.className = 'spark';
                spark.style.cssText = `
                    --dir-x: ${Math.cos(angle)};
                    --dir-y: ${Math.sin(angle)};
                    animation-delay: ${Math.random()*0.2}s;
                `;
                container.appendChild(spark);
            }

            // 自动清理
            setTimeout(() => container.remove(), 1200);
        }

        // 随机发射烟花
        function autoFire() {
            const x = Math.random() * window.innerWidth;
            const y = Math.random() * window.innerHeight/2 + window.innerHeight/2;
            createNewFirework(x, y);
            setTimeout(autoFire, Math.random()*1000 + 500);
        }

        // 启动
        autoFire();

        // 点击触发（可选）
        document.addEventListener('click', (e) => {
            createNewFirework(e.clientX, e.clientY);
        });
        
        </script>
    <!-- 其他元素保持原有结构 -->
</body>
</html>